<template>
  <div class="app-container">
      <el-form ref="employeeForm" :rules="rules" :model="employeeForm" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">

        <el-form-item label="姓名" prop="fullname">
          <el-input v-model="employeeForm.fullname" />
        </el-form-item>
        <el-form-item label="电话" prop="telephone">
          <el-input v-model="employeeForm.telephone" />
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="employeeForm.username" />
        </el-form-item>
        <el-form-item label="部门" prop="departmentID">
          <el-select v-model="employeeForm.departmentID" placeholder="请选择">
            <el-option
              v-for="item in departmentOptions"
              :key="item.ID"
              :label="item.title"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="positionID">
          <el-select v-model="employeeForm.positionID" placeholder="请选择">
            <el-option
              v-for="item in positionOptions"
              :key="item.ID"
              :label="item.title"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="管理范围" prop="scope">
          <el-select v-model="employeeForm.scope" placeholder="请选择">
            <el-option
              v-for="item in scopeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="指定区域" prop="scopeDistrict" v-if="employeeForm.scope == 11">
        </el-form-item>
        <el-form-item label="指定人员" prop="scopeEmployee" v-if="employeeForm.scope == 2">
        </el-form-item>
        <el-form-item label="指定部门" prop="scopeDepartment" v-if="employeeForm.scope == 5">
        </el-form-item>
        <el-form-item label="指定职位" prop="scopePosition" v-if="employeeForm.scope == 8">
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="employeeForm.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="备注" />
        </el-form-item>
      </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCannel()">
        取消
      </el-button>
      <el-button type="primary" @click="saveEmployee()">
        确认
      </el-button>
      <el-button v-if="employeeForm.status.value === 5" type="danger" @click="handleDelete(employeeForm)">
        删除
      </el-button>
    </div>
  </div>
</template>

<script>
import {  saveEmployee, getEmployeeDetail, removeEmployeeByID } from '@/api/mechanism/employee'
import {  getDepartmentUsable } from '@/api/mechanism/department'
import {  getPositionUsable } from '@/api/mechanism/position'


import waves from '@/directive/waves' // waves directive

import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'ComplexTable',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      employeeForm: {
        ID: undefined,
        remark: '',
        departmentID: 0,
        positionID:undefined,
        scope:undefined,
        title: '',
        status: {
          value:1
        }
      },
      departmentOptions:[],
      positionOptions:[],
      scopeOptions:[
        {
          label:"本人",
          value:1
        },
        {
          label:"指定人员",
          value:2
        },
        {
          label:"本部门",
          value:3
        },
        {
          label:"本部门及以下",
          value:4
        },
        {
          label:"指定部门",
          value:5
        },
        {
          label:"本职位",
          value:6
        },
        {
          label:"本职位及以下",
          value:7
        },
        {
          label:"指定职位",
          value:8
        },
        {
          label:"本区域",
          value:9
        },
        {
          label:"本区域及以下",
          value:10
        },
        {
          label:"指定区域",
          value:11
        }
      ],
      rules: {
        type: [{ required: true, employee: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, employee: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, employee: 'title is required', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.loadDepartments()
    this.loadPosition()
    let employeeID = this.$route.query && this.$route.query.employeeID
    if (employeeID !== undefined) {
      employeeID = parseInt(employeeID)
      if (!isNaN(employeeID)) {
        this.listLoading = true
        getEmployeeDetail({
          "employeeID":employeeID
        }).then(response => {
          if (response.status === 200) {
            this.employeeForm = response.data
            console.log(this.employeeForm)
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }
    }
  },
  methods: {
    handleCannel() {
      this.$router.push({ path: 'employee' })
    },
    loadDepartments() {
      getDepartmentUsable().then(response => {
        this.departmentOptions = response.data.list
      })
    },
    loadPosition() {
      getPositionUsable().then(response => {
        this.positionOptions = response.data.list
      })
    },
    saveEmployee() {
      let _this = this
      this.$refs['employeeForm'].validate((valid) => {
        if (valid) {
          try {
            _this.employeeForm.status = _this.employeeForm.status.value;
            if(_this.employeeForm.status == undefined){
              _this.employeeForm.status = 1;
            }
          } catch (error) {
            _this.employeeForm.status = 1;
          }
          if(_this.employeeForm.hasOwnProperty('ID')){
            if(_this.employeeForm.ID !== undefined){
              _this.employeeForm.employeeID = _this.employeeForm.ID;
            }

          }
          saveEmployee(_this.employeeForm).then((response) => {
          if (response.status === 200) {
            this.$message({
              message: '操作Success',
              type: 'success'
            })
            this.$router.push({ path: 'employee' })
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
          })
        }
      })
    },
    handleDelete(row, index) {
      removeEmployeeByID(row.ID).then((response) => {
          if (response.status === 200) {
            this.$message({
              message: '操作Success',
              type: 'success'
            })
            this.$router.push({ path: 'employee' })
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    }
  }
}
</script>
